import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './LoginLayout.less';
import DocumentTitle from 'react-document-title';
import Link from 'umi/link';
import SelectLang from '@/components/SelectLang';
import Footer from './Footer';
import { title } from '../defaultSettings';

class LoginLayout extends Component {

  componentWillMount() {
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });
  }

  getPageTitle = (pathname, breadcrumbNameMap) => {
    let pageTitle = '';
    try {
      breadcrumbNameMap.forEach(item => {
        if (pathname === item.path) {
          pageTitle = item.name + ' - ' + title;
          throw new Error('EndIterative');
        }
      });
    } catch { }
    return pageTitle;
  };

  render() {
    const {
      children,
      location: { pathname },
      breadcrumbNameMap,
    } = this.props;

    const logo = '';

    return (
      <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
        <div className={styles.container}>
          <div className={styles.lang}>
            <SelectLang />
          </div>
          <div className={styles.content}>
            <div className={styles.top}>
              <div className={styles.header}>
                <Link to="/">
                  <img alt="logo" className={styles.logo} src={logo} />
                  <span className={styles.title}>Animix Blue</span>
                </Link>
              </div>
              <div className={styles.desc}>Powered by Ant Design</div>
            </div>
            {children}
          </div>
          <Footer></Footer>
        </div>
      </DocumentTitle>
    );
  }
}

export default connect(({ menu: menuModel }) => ({
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
}))(props => (
  <LoginLayout {...props} />
));